<template>
    <div class="row flex-center" style="gap: 20px; padding: 40px 20px">
        <div class="btn" @click="start">开始连接</div>
        <div class="btn" @click="close">断开连接</div>
        <div class="btn" @click="conf.message = []">清空消息列表</div>
        <div class="btn">当前状态：{{ ws.status === 1 ? '已连接' : '未连接' }}</div>
    </div>
    <div class="row justify-center" style="margin-bottom: 40px">
        <div class="row" style="width: 900px; gap: 40px">
            <div>
                连接地址：
                <el-input v-model="conf.url" style="width: 250px" />
            </div>
            <div>
                发送信息：
                <el-input v-model="conf.send" style="width: 250px" />
                <el-button style="margin-left: 10px" @click="sendMessage">发送</el-button>
            </div>
        </div>
    </div>
    <div class="row justify-center">
        <div class="box">
            <div v-for="item in conf.message">
                {{ item.time }}：{{ conf.messagetype[item.type] }} => {{ item.data }}
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import System from '~/utils/System'

enum MessageType {
    /**
     * 收到发来的消息
     */
    Get,
    /**
     * 发送到服务器的消息
     */
    Send,
    /**
     * 通知
     */
    Message
}

const conf = reactive({
    status: '未连接',
    messagetype: {
        [MessageType.Get]: '收到',
        [MessageType.Send]: '发送',
        [MessageType.Message]: '通知'
    } as any,
    message: [] as {
        time: any
        type: MessageType
        data: any
    }[],
    url: 'ws://127.0.0.1:8801/ws',
    send: ''
})

const addMessage = (type: MessageType, ctx: any) => {
    conf.message.push({
        time: new Date().Format(),
        type: type,
        data: ctx
    })
}

const sendSuffix = ''

/**
 * 获取连接参数，也可以直接写入，这里是因为对地址进行了配置，所以每次连接都更新一次地址
 */
const getParam = () => {
    return {
        url: conf.url,
        needReconnect: true,
        reconnectGapTime: 3000,
        sendSuffix,
        messageSuffix: sendSuffix,
        heartSend: '~',
        heartGet: '~',
        heartGapTime: 3000,
        onopen: () => {
            addMessage(MessageType.Message, '连接成功')
        },
        onmessage: (data: any) => {
            console.log(data.data)
            const sp = data.data.split(sendSuffix).filter((el: string) => el.length > 0)
            console.log(sp)
            sp.forEach((ctx: any) => {
                addMessage(MessageType.Get, ctx)
            })
        },
        onerror: () => {
            addMessage(MessageType.Message, '连接失败:' + conf.url)
        }
    } as IWebSocketBeanParam
}

/**
 * websocket示例，主要维护和使用对象
 */
const ws = new WebSocketBean(getParam())
const start = () => {
    // ws.start()
    ws.start(getParam())
}
const close = () => {
    ws.dispose()
    addMessage(MessageType.Message, '关闭连接成功')
}

const sendMessage = () => {
    if (ws.status === 1) {
        ws.send(conf.send)
        addMessage(MessageType.Send, conf.send)
        System.sr('发送成功')
    } else {
        System.er('未连接')
    }
}
</script>
<style lang="less" scoped>
.btn {
    width: 140px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff00080;
    cursor: pointer;
    &:hover {
        border: 1px solid #3ce984;
    }
}

.box {
    width: 900px;
    height: 400px;
    border: 1px solid #000;
    overflow: hidden auto;
    padding: 15px;
}
</style>
